<template>
	<view >
		<view class="detail" v-if="JSON.stringify(detail) != '{}'">
			<view class="detail-title">
				<h1 class="kaiti">{{ detail.title }}</h1>
				<view class="detail-title_icon">
					<view>
						<text class="tn-icon-my-simple-fill tn-color-cyan" style="padding: 10rpx;"></text>
						<text>{{ detail.author }}</text>
					</view>
					<view>
						<text class="tn-icon-time tn-color-cyan" style="padding: 10rpx;"></text>
						<text>{{ detail.createTime }}</text>
					</view>
				</view>
			</view>
			<view class="detail-content">
				<UaMarkdown :source="detail.content" />
			</view>
			<view class="detail-foot">
					<text class="detail-foot_line"></text>
					<text class="detail-foot_text">本文更新于{{ detail.createTime }}</text>
					<text class="detail-foot_line"></text>
			</view>
		</view>
		<view class="detail-comment">
			<h2 class="kaiti one-title">评论区：</h2>
			 <tn-empty mode="comment" v-if="comment.length == 0"></tn-empty>
			<comment :comment="comment" @replayMsg="replayMsg"/>
		</view>
		<view class="detail-input">
			<tn-input
				ref="inputRef"
				class="detail-input_input"
				v-model="value"
				:type="inputObj.type"
				:focus="inputObj.focus"
				border
				showConfirmBar
				showRightIcon
				@blur="inputBlur"
				:placeholder="inputObj.placeholder" />
				<view class="detail-input_button">
					<view class="detail-input_icon" >
						<view class="detail-input_icon--item" @click="shareClick">
							<text class="tn-icon-share-circle"></text>
							<text class="detail-input_icon--item__text">分享</text>
						</view>
						<view class="detail-input_icon--item">
							<text class="tn-icon-comment">
								<tn-badge absolute translateCenter backgroundColor="#E83A30" fontColor="tn-color-white">{{ detail.comment }}</tn-badge>
							</text>
							<text class="detail-input_icon--item__text">评论</text>
						</view>
						<view class="detail-input_icon--item">
							<text class="tn-icon-praise"  @click="likeBlog">
								<tn-badge absolute translateCenter backgroundColor="#E83A30" fontColor="tn-color-white">{{ detail.like }}</tn-badge>
							</text>
							<text class="detail-input_icon--item__text">点赞</text>
						</view>
						<view class="detail-input_icon--item">
							<text class="tn-icon-eye"  @click="likeBlog">
								<tn-badge absolute translateCenter backgroundColor="#E83A30" fontColor="tn-color-white">{{ detail.view }}</tn-badge>
							</text>
							<text class="detail-input_icon--item__text">浏览</text>
						</view>
					</view>
					<tn-button backgroundColor="tn-main-gradient-indigo" shape="round" @click="postComments">发表</tn-button>
				</view>
		</view>
		<tn-toast ref="toast"></tn-toast>
		 <tn-popup v-model="show" mode="bottom" height="300rpx" :borderRadius="12" closeBtn @close="closeShare">
				<view class="share-blog">
					<image class="share-blog-img" src="@/static/img/QQ.svg" mode="" @click="shareBlog('qq','')"></image>
					<image class="share-blog-img" src="@/static/img/wx.svg" mode="" @click="shareBlog('weixin','WXSceneSession')"></image>
					<image class="share-blog-img" src="@/static/img/pyq.svg" mode="" @click="shareBlog('weixin','WXSceneTimeline')"></image>
					<image class="share-blog-img" src="@/static/img/pyq.svg" mode="" @click="shareBlog('weixin','WXSceneFavorite')"></image>
					<image class="share-blog-img" src="@/static/img/wb.svg" mode="" @click="shareBlog('sinaweibo','')"></image>
					<image class="share-blog-img" src="@/static/img/fz.svg" mode="" @click="copyShare"></image>
				</view>
			</tn-popup>
	</view>
</template>

<script>
	import UaMarkdown from "@/components/ua2-markdown/ua-markdown.vue"
	import comment from "@/components/comment/comment.vue"
	import { getDataTime } from "@/utils/validate.js"
	export default {
		components:{ UaMarkdown,comment },
		data() {
			return {
				detail:{},
				option:{},
				comment:[],
				value:'',
				inputObj:{
					placeholder:'快来发表评论吧๑乛◡乛๑',
					type:'textarea',
					focus:false
				},
				replayInfo:{},
				show:false
			};
		},
		methods:{
			//获取博客详情
			getDetail(option){
				uni.showLoading({
					title: '加载中'
				});
				this.$api.getBlogDetail(option).then(res => {
					if(res.code == 200) {
						this.detail = res.data
						this.getComment()
					}
				})
			},
			//点赞
			likeBlog(){
				let obj = {
					id:this.option.id,
					like:this.detail.like
				}
				this.$api.likeBlog(obj).then(res => {
					if(res.code == 200){
						this.getDetail(this.option)
					}
				})
			},
			getComment(){
				this.$api.getComment(this.option).then(res => {
					if(res.code == 200){
						this.comment = res.data
						console.log(res)
						uni.hideLoading();
					}
				})
			},
			//点击回复
			replayMsg(item) {
				this.replayInfo = item
				this.inputObj.placeholder = `回复  @${item.author}`
				this.inputObj.focus = true
			},
			//输入框失去焦点
			inputBlur(){
				uni.onKeyboardHeightChange(res => {
					if(res.height == 0){
						this.inputObj.placeholder = `快来发表评论吧๑乛◡乛๑`
						this.inputObj.focus = false
						this.replayInfo = {}
					}
				})
			},
			//发表评论
			postComments(){
				let info = {}
				let adrr = uni.getStorageSync('adrr');
				let userInfo = uni.getStorageSync('userInfo');
				uni.getSystemInfo({
					success: function (res) {
						info = res
					}
				});
				if( !userInfo ){
					this.$refs.toast.show({
						title: '提示',
						content: '您还未登录，请先登录',
						icon: 'close-fill',
						image: '',
						duration: 5000
					})
					return false
				}
				let obj = {
					address:adrr.city,
					author:userInfo.userName,
					avatar:userInfo.avatar,
					browser:info.browserName == 'chrome'?'#icon-chrome':'#icon-Safari',
					createTime:getDataTime(),
					ip:adrr.ip,
					isblogger:userInfo.isBlogger,
					pId:this.replayInfo?this.replayInfo.id:null,
					pName:this.replayInfo?this.replayInfo.userName:null,
					rId:this.detail.id,
					system:info.osName == 'android'?'#icon-anzhuo':'#icon-ios',
					text:this.value
				}
				this.$api.addComment(obj).then(res => {
					if(res.code == 200){
						this.getComment()
						this.inputObj.placeholder = `快来发表评论吧๑乛◡乛๑`
						this.inputObj.focus = false
						this.replayInfo = {}
					}
				})
			},
			//打开分享
			shareClick(){
				this.show = true
			},
			//关闭分享
			closeShare(){
				this.show = false
			},
			//分享到
			shareBlog(provider,scene){
				var pages = getCurrentPages() // 获取栈实例
				let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
				let currentPage = pages[pages.length - 1]['$page']['fullPath'] //当前页面路径(带参数)
				uni.share({
					provider: provider,
					scene: scene,
					type: 0,
					href: currentPage,
					title: this.detail.title,
					summary: this.detail.preface,
					imageUrl: this.detail.img,
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			//复制
			copyShare(){
				var pages = getCurrentPages() // 获取栈实例
				let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
				let currentPage = pages[pages.length - 1]['$page']['fullPath'] //当前页面路径(带参数)
				uni.setClipboardData({
				  data: currentPage,
				})
			},
		},
		onLoad:function(option){
			this.option = option
			this.getDetail(option)
		}
	}
</script>

<style lang="scss">
.share-blog{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 100rpx 60rpx;
	&-img{
		width: 80rpx;
		height: 80rpx;
	}
}
.detail{
	padding: 20rpx;
	&-title{
		padding: 20rpx;
		margin-bottom: 20rpx;
		h1{
			font-size: 36rpx;
			line-height: 60rpx;
			margin-bottom: 20rpx;
		}
		&_icon{
			display: flex;
			justify-content: flex-start;
			font-size: 28rpx;
			color: #838383;
		}
	}
	&-content{
		background-color: #F8F7F8;
		padding: 20rpx;
		border-radius: 8rpx;
	}
	&-foot{
		display: flex;
		justify-content:center;
		align-items: center;
		margin-top: 20rpx;
		font-size: 24rpx;
		&_line{
			width: 20%;
			height: 2rpx;
			background-color: #AAAAAA;
		}
		&_text{
			margin: 0 20rpx;
			color: #AAAAAA;
		}
	}
	&-comment{
		padding: 40rpx 40rpx 300rpx 40rpx;
		margin-top: 20rpx;
		background-color: #F8F7F8;
		margin-bottom: 20rpx;
	}
	&-input{
		padding: 20rpx 40rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		z-index: 2004;
		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
		&_button{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 40rpx;
		}
		&_icon{
			font-size: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			&--item{
				display: flex;
				flex-direction: column;
				margin-right: 80rpx;
				text{
					position: relative;
				}
				&__text{
					font-size: 24rpx;
				}
			}
		}
	}
}
</style>
